处理异步利器 -- Redux-saga

本文翻译自: https://medium.freecodecamp.c... 首发于: 处理异步利器 -- Redux-saga (众成翻译)

作者：行魏可知
链接：https://zhuanlan.zhihu.com/p/...
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

几天前，我和同事谈了谈如何管理Redux异步操作。虽然他用了很多插件来扩展Redux，但还是让他对 Javascript 产生疲劳症。

我们来看看是什么情况：如果你习惯于根据你的需要而不是根据技术身所带来的价值，来使用技术为你工作，那么搭建React生态系统是非常烦人和浪费时间的。

过去两年，我参与了一些Angular项目，并且爱上了 MVC(Model-View-Controller) 开发模式。有一点我不得不说，对于Backbone.js出身的我来说，学习Angular虽然很困难，但同时也非常值得。正因为如此，我找到了一份更好的工作，也有机会从事自己感兴趣的工作了。说真的，我从Angular社区学到了很多。

这些日子工作非常顺利，但是战斗还要继续，我也在尝试了新的框架: React, Redux 和 Sagas。

几年前，我偶然阅读了一篇Thomas Burleson的文章 -- Promise调用链扁平化，受益良多。两年前，我还经常想起其中很多极好的想法。

这些天我在往React迁移，我发现Redux非常强大，尤其是使用sagas来管理异步操作的时候深有感触。所以我就参考了Thosmas的文章，写下了这篇文章，用redu-saga实现了类似的方法。希望本文能给大家带来帮助，更好地理解学习redux-saga的重要性。

声明: 我也在另一个项目中做了类似的事情，希望在两个项目中都能引发大家讨论。本文中，我假设你已经对 Promise，React，Redux 等 Javascript 知识有了基本的了解。

首先

Redux-saga的作者 Yassine Elouafi 说:

redux-saga 是一个库，致力于在React/Redux应用中简化异步操作（side effects，即像异步获取远程数据或者浏览器缓存数据）。

Redux-saga 是基于 saga 和 ES6 生成器函数(Generator)，辅助我们快速组织所有异步、分散的操作。如果你想要了解更多Saga模式本身，可以看看 Caitie McCaffrey 录制的视频；想了解更多关于Generators的知识，可以免费观看 Egghead 上的视频 (至少在本文发布的时候，视频是免费的)。

案例：飞行航班表

本文将用Redux-saga重现Thomas举的例子。代码最终放在 Github 上，并附上demo。

场景如下：

图片来自 Thomas Burleson

如你所见，上图中有三个API调用：getDeparture -> getFlight -> getForecast，所以我们的API服务设计如下：

class TravelServiceApi {
static getUser() {
return new Promise((resolve) => {

 setTimeout(() => {
   resolve({
        email : "[e-mail]",
        repository: "http://github.com/username"
   });
 }, 3000);

});
}

static getDeparture(user) {
return new Promise((resolve) => {
setTimeout(() => {

resolve({
  userID : user.email,
  flightID : “AR1973”,
  date : “10/27/2016 16:00PM”
 });
}, 2500);

});
}

static getForecast(date) {
return new Promise((resolve) => {

  setTimeout(() => {
    resolve({
        date: date,
        forecast: "rain"
    });
  }, 2000);

});
}
}
这些API服务是模拟场景中的数据服务。首先，我们需要一个用户的信息，然后根据这个用户的信息去获取航班的起飞信息和天气预报，从而我们创建了多个数据面板如下：

继续阅读